<template>
  <div class="login-bg">
    <div class="login-wrapper">
      <div class="login-box  animate__animated animate__zoomIn">
        <div class="login-title animate__animated animate__slideInRight">
          <p v-if="isDev" style="font-size: 12px; color: red;">当前为开发模式 不需要验证码校验</p>
          用户登录
        </div>
        <div class="form">
          <a-form :model="form" ref="loginForm" :rules="rules" @finish="handleClickLogin">
            <a-form-item name="username">
              <a-input
                v-model:value="form.username"
                placeholder="用户名/邮箱/手机号"
              />
            </a-form-item>
            <a-form-item name="password">
              <a-input
                type="password"
                v-model:value="form.password"
                placeholder="密码"
              />
            </a-form-item>
            <a-form-item name="code">
              <a-row :gutter="24">
                <a-col :span="14">
                  <a-input
                    v-model:value="form.code"
                    placeholder="验证码"
                  />
                </a-col>
                <a-col :span="10">
                  <img class="code-img" @click="refreshCode" :src="code.img">
                </a-col>
              </a-row>
            </a-form-item>
            <a-button :disabled="disabledLoginBtn" type="primary" class="submit-button" @click="handleClickLogin">{{ disabledLoginBtn ? '登录中。。。' : '登录' }}</a-button>
          </a-form>
        </div>
      </div>
    </div>
    <footer>
      {{ footerTxt }} · <a href="http://www.beian.miit.gov.cn" style="color: #fff;" target="_blank">{{ caseNumber }}</a>
    </footer>
  </div>
</template>

<script lang="ts">
import { Router, useRouter } from 'vue-router'
import { useStore, Store } from 'vuex'
import { footerTxt, caseNumber } from '@/settings'
import { code } from '@/api/sys/user'
import { isDev } from '@/utils'
import { notification } from 'ant-design-vue'
import { computed, defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
import { TLoginCheck, TResponseCode } from '@/api/sys/type'
import { ICommonState } from '@/typings'

export default defineComponent({
  name: 'Login',
  setup() {
    const loginForm = ref<any | null>(null)
    const store: Store<any> = useStore()
    const router: Router = useRouter()
    const state = reactive({
      form: {
        username: isDev ? 'wangsh' : '',
        password: isDev ? 'wangsh' : '',
        code: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        code: [
          !isDev && { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      },
      code: {
        img: '',
        uuid: ''
      },
      disabledLoginBtn: computed(() => (store.state.common as ICommonState).loading)
    })

    // 刷新验证码
    const refreshCode = () => {
      code().then((res: TResponseCode) => {
        state.code = res
      })
    }

    // store login
    const login = (form: TLoginCheck) => store.dispatch('user/login', form)
    const toggleLoading = (isLoading = false) => store.dispatch('common/toggleLoading', !!isLoading)

    // 登录按钮
    const handleClickLogin = () => {
      loginForm.value.validate().then(() => {
        toggleLoading(true)
        login({ ...state.form, uuid: state.code.uuid }).then((res) => {
          const { state, result } = res
          if (state) {
            // 跳转
            notification.success({
              message: '提示',
              description: '登录成功'
            })
            router.push('/')
          } else {
            notification.error({
              message: '提示',
              description: result
            })
            toggleLoading()
            refreshCode()
          }
        })
      })
    }

    onMounted(() => {
      refreshCode()

      toggleLoading()
    })

    return {
      ...toRefs(state),
      loginForm,
      handleClickLogin,
      refreshCode,
      isDev,
      footerTxt,
      caseNumber
    }
  }
})
</script>

<style lang="less" scoped>
  .login-bg {
    position: relative;
    overflow: hidden;
    background: #f0f7ff;
    width: 100vw;
    height: 100vh;
    .login-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      .login-box {
        background: rgba(255, 255, 255, 0.9);
        padding: 0 30px;
        border-radius: 5px;
        .login-title {
          text-align: center;
          border-bottom: 1px solid #fff;
          padding: 15px 0;
          box-sizing: border-box;
          letter-spacing: 2px;
        }
        .form {
          width: 270px;
          padding: 20px 0;
          .submit-button {
            width: 100%;
          }
          .code-img {
            width: 100%;
          }
        }
      }
    }
    footer {
      position: fixed;
      bottom: 10px;
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 14px;
      color: #fff;
    }
  }
</style>
